<template>
    <div>
        <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft">
            <template #right>

                <van-icon name="star-o" size="24" />
            </template>
        </van-nav-bar>
        <van-tabs v-model:active="active">
            <van-tab title="商品">

            </van-tab>
            <van-tab title="评价">

            </van-tab>
            <van-tab title="详情">

            </van-tab>
            <van-tab title="推荐">


            </van-tab>

        </van-tabs>
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
                <img :src="image" />
            </van-swipe-item>

            <template #indicator="{ active, total }">
                <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
            </template>
        </van-swipe>
        <ShopFooter></ShopFooter>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const onClickLeft = () => history.back();
const active = ref(0)
const images = [
    'https://img1.baidu.com/it/u=2534083975,2209120468&fm=253&fmt=auto&app=138&f=JPEG?w=731&h=470',
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.3490.cn%2Fedit%2F2017%2F04-14%2F20170414095010081008.jpg&refer=http%3A%2F%2Fpic.3490.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674730217&t=521725e4ecec50ee51547705687f522f',
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg30.360buyimg.com%2Fsku%2Fjfs%2Ft4327%2F119%2F1131415753%2F337146%2F64e7e6df%2F58be198cN3323f89b.jpg&refer=http%3A%2F%2Fimg30.360buyimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674730233&t=8fe910959bc5c33836c4d30ef71b0751',
    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.taolinzhen.com%2Fupload%2Fimage%2F20190216%2F18011094117_450x278.jpg&refer=http%3A%2F%2Fwww.taolinzhen.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674730285&t=6761f8024ec3a12fea3505edfadf58a1',
];
</script>

<style scoped>
:deep(.van-nav-bar__content) {
    height: 50px;
    background-color: #fff;
    color: black;
    --van-nav-bar-text-color: black;
    --van-nav-bar-icon-color: black;
}

:deep(.van-nav-bar__text) {
    color: black;
    font-size: 14px;
    font-weight: lighter;
}

:deep(.van-nav-bar__title) {
    color: black;
}

img {
    width: 100%;
    height: 60vw;
}

.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
}
</style>